<template>
  <el-popover
    placement="bottom-end"
    :width="216"
    :visible="visible"
    popper-class="dark-select-popper"
  >
    <template #reference>
      <div
        class="select-background-style"
        @click="openImagePopover"
        :class="visible ? 'is-focus' : ''"
      >
        <img v-if="selected" class="image-show" :src="selected?.url" />

        <div class="el-input__suffix spread">
          <SvgIcon icon-class="ic_向下" :class="visible ? 'is-up' : 'is-down'" />
        </div>
      </div>
    </template>
    <div class="content">
      <div class="image-list">
        <div v-if="allowUpload" class="image-box">
          <div :key="uploadKey" class="upload-file">
            <SvgIcon icon-class="ic_上传" class="upload-icon" />
            <label class="upload-input" for="fileInput"></label>
            <input id="fileInput" type="file" :accept="accept" @change="uploadBefore" />
          </div>
        </div>
        <div
          v-for="image of props.imageList"
          class="image-box"
          :class="selected?.name === image.name ? 'is-selected' : ''"
          @click="selectImage(image)"
        >
          <img class="image-item" :src="image.url" />
          <div v-if="allowDelete" class="delete-image">
            <el-tooltip effect="dark" content="删除" placement="top">
              <SvgIcon icon-class="删除" class="upload-icon" @click="deleteImage(image)" />
            </el-tooltip>
          </div>
        </div>
      </div>
      <div class="action">
        <el-button type="primary" class="canel-btn" size="small" plain @click="onCanel"
          >取消</el-button
        >
        <el-button type="primary" size="small" @click="onOk">确定</el-button>
      </div>
    </div>
  </el-popover>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';

defineOptions({
  name: 'SelectImage',
});

interface IProps {
  imageList: any[];
  modelValue: any;
  accept: string;
  allowUpload: boolean;
  allowDelete: boolean;
}

const props = withDefaults(defineProps<IProps>(), {
  imageList: () => [],
  modelValue: {} as any,
  allowUpload: () => false,
  allowDelete: () => false,
  accept: 'image/*',
});

const emit = defineEmits(['update:modelValue', 'uploadBefore', 'change', 'deleteImage']);
const visible = ref(false);
const selected = ref<any>(null);
const uploadKey = ref(0);

function openImagePopover() {
  visible.value = !visible.value;
}

function selectImage(image: any) {
  selected.value = image;
}

function deleteImage(image: any) {
  if (props.imageList.length === 1) {
    selected.value === null;
  }
  emit('deleteImage', image);
}

function onCanel() {
  selected.value = props.modelValue;
  visible.value = false;
}

function onOk() {
  if (!selected.value) {
    ElMessage.info('请选择背景');
    return;
  }
  emit('update:modelValue', selected.value);
  emit('change', selected.value);
  visible.value = false;
}

function uploadBefore(e: any) {
  const file = e.target.files[0];
  uploadKey.value += 1;
  const params = {
    file: file,
    fileType: file.type,
    fileName: file.name.split('.')[0],
  };
  emit('uploadBefore', params);
}

watchEffect(() => {
  selected.value = props.modelValue;
});
</script>

<style lang="less" scoped>
.select-background-style {
  position: relative;
  width: 100%;
  height: 24px;
  background-color: #303030;
  border-color: #464646;
  border-radius: 4px;
  display: flex;
  align-items: center;
  cursor: pointer;

  .image-show {
    width: 24px;
    height: 24px;
    margin-left: 6px;
  }

  &:hover {
    border-color: var(--el-select-border-color-hover);
  }

  &.is-focus {
    border-color: var(--el-color-primary); //#0560fd
  }

  .spread {
    margin-left: auto;
    margin-right: 11px;
    align-items: center;

    .is-down {
      transition: transform var(--el-transition-duration);
      transform: rotateZ(0);
    }

    .is-up {
      transition: transform var(--el-transition-duration);
      transform: rotateZ(-180deg);
    }
  }
}

.dark-select-popper {
  .content {
    width: 100%;

    .image-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;

      input[type='file'] {
        display: none;
      }

      .upload-file {
        position: relative;
        width: 57px;
        height: 50px;
        background: rgba(69, 72, 81, 0.6);
        border: 1px solid;
        border-radius: 2px;
        margin-bottom: 4px;
        display: flex;
        justify-content: center;
        align-items: center;

        .upload-icon {
          font-size: 26px;
        }

        .upload-input {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
          cursor: pointer;

          &::before {
            content: '';
            opacity: 0;
          }
        }
      }

      .image-box {
        text-align: center;
        position: relative;

        &.is-selected {
          .image-item {
            border: 1px solid #0560fd;
          }
        }

        .image-item {
          width: 55px;
          height: 50px;
          border-radius: 2px;
          border: 1px solid;
          cursor: pointer;
        }

        .delete-image {
          position: absolute;
          right: 2px;
          bottom: 5px;
          width: 21px;
          height: 14px;
          background: #0560fd;
          border-radius: 7px 0px 3px 0px;
          opacity: 0.8;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }

    .action {
      text-align: center;
      margin-top: 10px;

      .canel-btn {
        border-radius: 2px;
        border: 1px solid #045ffc;
        background-color: #0a0b0d;
        color: rgba(255, 255, 255, 0.96);

        &:visited {
          color: #045ffc;
        }
      }
    }
  }
}
</style>
